Title: How to Display Custom Product Attributes on the Edit Order Screen

Publish Date: Tue, 07 Nov 2023 07:03:06 +0000

Categories: Programming

Tags: WooCommerce, WordPress

Content:

In WooCommerce, the admin order page is your command center. It's where you glean insights at a glance and manage the heart of your e-commerce operations. But could it offer more? What if you could augment it with additional product details and direct links to the products themselves?



In this article, I'll walk you through a WooCommerce snippet that does precisely that, adding a layer of convenience and efficiency to your workflow.







Table of Contents



Table of ContentsDive Into the CodeSeamless Integration for Better Product ManagementAdapting the Snippet to Your WooCommerce StoreA Snippet That Speaks Your Language



Dive Into the Code



Originally, this snippet was not meant for the world – it was a personal solution to an efficiency problem I faced in my own store, Elemental Beacon, where I sold Dungeons & Dragons miniatures.



With a catalog of detailed products, finding the exact location of product files was a daily challenge. That is until I embedded the solution directly into the WooCommerce Orders screen.



Seamless Integration for Better Product Management





To take advantage of this enhancement, add this snippet to your theme’s functions.php file. If you're not familiar with code, fear not. This file is readily accessible through your WordPress dashboard under Appearance > Theme Editor or via an FTP client if you're technically inclined.



/**
 * @snippet       Display Custom Product Attributes on the Edit Order Screen
 * @author        Nicola Mustone
 * @author_url    https://nicolamustone.blog/2023/11/07/how-display-custom-product-attributes-edit-order-screen/
 * @tested-up-to  WooCommerce 8.4.X
 */
add_action( 'woocommerce_after_order_itemmeta', 'nm_admin_order_add_product_info_and_link', 10, 3 );
function nm_admin_order_add_product_info_and_link( $item_id, $item, $_product ) {
    if ( ! $_product ) return;

    $product_link          = get_permalink( $_product->get_id() );
	$attributes_to_display = ['slug_1', 'slug_2', 'slug_3']; // Specify the attribute slugs you want to display

    $target_product = $_product;
    if ($_product->is_type('variation')) {
        $parent_id = $_product->get_parent_id();
        $target_product = wc_get_product($parent_id);
    }

    $attributes = $target_product->get_attributes();
	
	echo '<hr>';
	echo '<table cellspacing="0" class="display_meta"><tbody>';

    foreach ( $attributes_to_display as $attr_slug ) {
        if ( isset( $attributes['pa_' . $attr_slug] ) ) {
            $attribute  = $attributes[ 'pa_' . $attr_slug ];
            $attr_label = wc_attribute_label( 'pa_' . $attr_slug );

            if ( $attribute->is_taxonomy() ) {
                $values = wc_get_product_terms( $target_product->get_id(), 'pa_' . $attr_slug, array( 'fields' => 'names' ) );
                if ( ! empty( $values ) ) {
                    echo '<tr><th>' . $attr_label . '</th><td>' . join( ', ', $values ) . '</td></tr>';
                }
            } else {
                // For non-taxonomy based attributes
                $values = array_map( 'trim', explode( WC_DELIMITER, $attribute->get_options() ) );
                    echo '<tr><th>' . $attr_label . '</th><td>' . join( ', ', $values ) . '</td></tr>';
            }
        }
    }
	
	echo '</tbody></table>';
	echo '<a href="' . esc_url( $product_link ) . '" target="_blank">' . __( 'View Product', 'woocommerce' ) . '</a>';
}



Adapting the Snippet to Your WooCommerce Store



What makes this snippet truly shine is its adaptability. The array $attributes_to_display is your customizable key. Simply replace slug_1, slug_2, and slug_3 with the slugs of the attributes you need to track (make sure not to include the pa_ prefix it has). These could be any attributes relevant to your product management. You can add as many more or as few as you need.



The snippet also adds a "View Product" link to the order items that link to the product page on your site.



This is what it would look like from my Elemental Beacon store:







A Snippet That Speaks Your Language



This snippet does more than just show additional data; it speaks the language of your business operations. Whether you deal in miniatures, apparel, or any niche, the fundamentals of e-commerce dictate that the right information at the right time is invaluable.



By adopting this snippet, you’ll find your WooCommerce order management transformed, and the tedious task of order processing will become a journey worth taking each day.



Another important function of attributes is filtering for similar products. WooCommerce does this by linking to archive pages if you configure the attribute to have one. You can also link to custom pages by making your attributes linkable.
